<template>
	<view class="personal-info-page">
		<view class="up-view">
			<view class="custom-navbar">
<!-- 				<view class="nav-left" @click="goBack">
					<global-arrow direction="left" :size="29" color="#fff"></global-arrow>
				</view>
				<view class="nav-title">
					<text>信息修改</text>
				</view>
				<view class="nav-right">
				</view> -->
			</view>
		</view>

		<!-- 信息列表 -->
		<view class="info-list">
			<view class="cardUp">
				<!-- 手机号输入框 -->
				<view class="form-item">
					<image class="custom-icon" src="/static/icons/infoEdit_Phone/手机号@2x.png" mode=""></image>
					<input class="input" type="number" placeholder="请输入手机号码" v-model="phone"
						placeholder-class="placeholder-style" />
					<uni-icons v-if="phone" type="clear" color="#ccc" size="24" @click="phone = ''"></uni-icons>
				</view>

				<view class="getcode">
					<!-- 验证码区域 -->
					<view class="form-item">
						<image class="custom-icon" src="/static/icons/infoEdit_Phone/验证码@2x.png" mode=""></image>
						<input class="input" type="text" placeholder="输入验证码" v-model="code"
							placeholder-class="placeholder-style" />
					</view>
					<button class="get-code-btn" :disabled="isCodeBtnDisabled"
						@click="getVerificationCode">{{ codeBtnText }}</button>
				</view>


				<!-- 提交按钮 -->
				<button class="submit-btn" @click="submitInfo">提交</button>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				phone: '', // 手机号
				code: '', // 验证码
				isCodeBtnDisabled: false, // 获取验证码按钮是否禁用
				codeBtnText: '获取验证码', // 验证码按钮文字
				countdown: 60, // 倒计时秒数
			};
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			// 获取验证码
			getVerificationCode() {
				// 简单验证手机号格式
				if (!/^1[3-9]\d{9}$/.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
					});
					return;
				}

				// 模拟发送验证码，实际项目中调用接口
				this.isCodeBtnDisabled = true;
				this.codeBtnText = `${this.countdown}s后重新获取`;

				const timer = setInterval(() => {
					this.countdown--;
					this.codeBtnText = `${this.countdown}s后重新获取`;
					if (this.countdown <= 0) {
						clearInterval(timer);
						this.isCodeBtnDisabled = false;
						this.codeBtnText = '获取验证码';
						this.countdown = 60;
					}
				}, 1000);

				// 实际项目中，这里应调用后端接口发送验证码
				console.log('向手机号', this.phone, '发送验证码');
			},
			// 提交信息
			submitInfo() {
				// 验证手机号和验证码
				if (!this.phone || !/^1[3-9]\d{9}$/.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
					});
					return;
				}
				if (!this.code) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none',
					});
					return;
				}

				// 实际项目中，调用接口提交信息
				uni.showLoading({
					title: '提交中...',
				});
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '提交成功',
						icon: 'success',
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}, 1000);
			},
		},
	};
</script>

<style scoped>
	.page {
		padding: 0 10rpx;
		background-color: #F8F8F8;
	}

	.up-view {
		padding: 0 20rpx;
		/* background: linear-gradient(to bottom, #3788FF, #0963E7); */
		color: #fff;
		padding-bottom: 250rpx;
		/* 1. 基础渐变背景（作为底层） */
		background: linear-gradient(to bottom, #3788FF, #0963E7);

		/* 2. 添加背景图（叠加在渐变上） */
		/* background-image: url('/static/icons/组 8.png'); */
		/* 背景图路径 */

		/* 3. 背景图属性设置 */
		background-repeat: no-repeat;
		/* 不重复平铺 */
		background-size: cover;
		/* 覆盖整个容器（可能裁剪） */
		/* 可选：background-size: contain; 完整显示图片（可能留空白） */

		background-position: center center;
		/* 图片居中显示 */
		background-attachment: scroll;
		/* 随内容滚动（默认值） */

		/* 图片层（在渐变上方） */
		background-blend-mode: overlay;
		/* 混合模式（可选） */
	}

	.custom-navbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		padding: 0 10rpx;
		font-weight: 300;
		box-sizing: border-box;
	}

	.nav-title {
		margin-right: 17rpx;
	}

	.personal-info-page {
		background-color: #f5f5f5;
		height: 100vh;
	}


	.info-list {
		margin-top: 20rpx;
		border-radius: 100rpx;
		padding: 20rpx;
	}

	.cardUp {
		margin-top: -260rpx;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 20rpx;
	}

	/* 原有样式保持不变，新增以下样式 */
	.getcode{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.form-item {
		display: flex;
		align-items: center;
		background-color: #efefef;
		border-radius: 60rpx;
		margin: 30rpx 20rpx 15rpx;
		padding: 26rpx 30rpx;
	}

	.input {
		flex: 1;
		margin: 0 15rpx;
		font-size: 28rpx;
		background-color: #efefef;
	}

	/* 自定义图标样式 */
	.custom-icon {
		width: 32rpx;
		/* 图标宽度（对应原size="24"的视觉大小） */
		height: 40rpx;
		/* 高度自适应 */
		margin-right: 20rpx;
		/* 如需调整颜色，可使用滤镜（仅对单色图标有效） */
		/* filter: drop-shadow(0 0 0 #4CD964); */
	}

	.placeholder-style {
		color: #ccc;
	}

	.get-code-btn {
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		background-color: #297CF8;
		color: #fff;
		margin-top: 16rpx;
		border-radius: 60rpx;
		font-size: 25rpx;
		border: none !important;
	}

	.submit-btn {
		margin: 60rpx 80rpx 0;
		background-color: #0362E6;
		color: #fff;
		font-size: 30rpx;
		border-radius: 50rpx;
		height: 80rpx;
		line-height: 80rpx;
	}
</style>